﻿<ApexChart TItem="TimeSeries"
           Title="Value"
           Options=options1
           Height="150"
           XAxisType="XAxisType.Datetime"
           OnScrolled=Scroll>

    <ApexPointSeries TItem="TimeSeries"
                     Items="data"
                     Name="Value"
                     SeriesType="SeriesType.Line"
                     XValue="@(e => e.Date)"
                     YAggregate="@(e => e.Sum(e => e.Value))"
                     OrderBy="e=>e.X"
                     Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
</ApexChart>

<h3 class="mt-2">View Range</h3>
    <Row>
        <RowCol Auto>
            XAxis Min: @XMin.ToString("d")
        </RowCol>
        <RowCol Auto>
             XAxis Max: @XMax.ToString("d")
        </RowCol>
    </Row>

@code {
    private List<TimeSeries> data { get; set; } = new TimeSeriesGenerator(100).TimeSeries;
    private ApexChartOptions<TimeSeries> options1 = new();

    private DateTimeOffset XMin;
    private DateTimeOffset XMax;

    protected override void OnInitialized()
    {
        const string mainChartId = "mainChart";

        XMin = data.Min(e => e.Date).AddDays(30);
        XMax = XMin.AddDays(40);

        options1.Chart.Id = mainChartId;
        options1.Chart.Toolbar = new Toolbar { AutoSelected = AutoSelected.Pan };
        options1.Xaxis = new XAxis { Min = data.Min(e => e.Date).AddDays(30).ToUnixTimeMilliseconds(), Max = XMin.AddDays(40).ToUnixTimeMilliseconds() };
    }

    private void Scroll(SelectionData<TimeSeries> selection)
    {
        var min = selection?.XAxis?.Min;

        if (min != null)
        {
            XMin = DateTimeOffset.FromUnixTimeMilliseconds((long)min);
        }
  
        var max = selection?.XAxis?.Max;

        if (max != null)
        {
            XMax = DateTimeOffset.FromUnixTimeMilliseconds((long)max);
        }
    }
}
